<template>
  <div class="all">
     <div class="center">
        <span class="timer">{{time}}</span>
        <div class="show_img">
          <img :src="share_imgSrc" class="fen_img"/>
        </div>
        <div class="show_title " v-html="show_title">
        </div>
        <div class="show_click clearfloat">
             <div class="goodgood" :class="selected">
                 <div class="click_good" @click="goodTa">支持他</div>
                 <transition name="fade">
                   <img src="http://file.zoomyoung.cn/web/img/like.png" class="goodShow" v-show="goodShow"/>
                 </transition>
             </div>
             <div class="click_continue" @click="design"><a class="continue_design">我也要定制</a><img src="./../assets/img/left.png" class="continue_img"/></div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      getGood:"",
      share_imgSrc:"",
      goodShow:false,
      selected:{select:false},
      total:"",
      que:"",
      userName:"",
      show_title:"",
      time:""
    }
  },
  beforeCreate(){
        var _this=this;
        _this.bus.$emit('loading', true);    //把加载层开启
        var route_path=_this.$route.query.code;
        this.$http.get('http://zoomyoung.cn/api/auth/get-userinfo',{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){  
        if(res.data.message=='no_login')
        {
        window.location.href="http://zoomyoung.cn/api/auth/wechat-login?callback=http://design2.zoomyoung.cn?path="+route_path;
        }else{
           _this.reset(_this)    //当登陆后就初始化页面
           _this.getNumber(_this)    //当登陆后就初始化页面
        }
      }).catch(function(err){  
         console.log(err)  
      });
  },
  methods:{
    design(){
      console.log('a')
      this.$router.push({name:"design"}); 
    },
    enter(){
     this.selected.select=true;
    },
    goodTa(){
      if(!this.selected.select)
      {
        this.goodShow=true;
      }
    
    this.checkGood();
    },
   getActiveStatus(){
        var _this=this;
        this.$http.get('http://zoomyoung.cn/api/design/get-active-status',
        {params:{code:_this.$route.query.code}},
        {xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){  
         _this.timeTotal(res)
         _this.checkActive(res)
      }).catch(function(err){  
         console.log(err)  
      });
    },
   checkGood(){
        //获取二维码中带过来的code值  二维码的地址是这样的http://design.zoomyoung.cn/good.html?code=jl3wK8LS
        var _this=this;
        this.$http.post('http://zoomyoung.cn/api/design/support-design',{code:this.$route.query.code},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          _this.getNumber(_this);
          _this.$nextTick(function(){
            _this.getNumber(_this);
          })
        }).catch(function(err){  
           console.log(err)  
        });
   },
   reset(_this){
      //初始化显示模特照片的性别
      this.$http.post('http://zoomyoung.cn/api/design/build-share-image',{code:this.$route.query.code},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
           if(_this.sex=='1')
            {
              _this.share_imgSrc=res.data.data.boy.img_url;
            }else{
              _this.share_imgSrc=res.data.data.girl.img_url;
            }
          _this.$nextTick(function(){
          _this.bus.$emit('loading', false);    //把加载层开启
          })
      }).catch(function(err){  
         console.log(err)  
      });
   },
   getNumber(_this) {     //获取点赞的数量
        this.$http.post('http://zoomyoung.cn/api/design/get-support-num',{code:this.$route.query.code},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
              if(res.data.data.is_oneself==1)
              {
                _this.$router.push({name:"finish",query:{code:_this.$route.query.code}});
              }else{
               console.log(res)
              _this.total = res.data.data.support_num;
              _this.que = 20 - res.data.data.support_num;
              _this.userName = res.data.data.nickname;
              //当满20个赞的时候，赞的显示还是会加，可是缺多少个赞就不会继续加
              if (_this.que < 1) {
              _this.que = 0;
              }
              console.log(_this.userName)
              _this.getActiveStatus()
              // _this.show_title='您好友「' + _this.name + '」已获得<span class="front-red">' + _this.total + '</span>次支持，他再获得' + _this.que + '次支持可有机会免费获得此衣服，快来参与吧'
             }
            
        }).catch(function(err){  
        console.log(err)  
        });
    },
    timeTotal(message){
        var _this=this;
        var total=message.data.data.time_init;
        var interVal=setInterval(function () {
            if(total>=1){
                total-=1;
                _this.timeSever(total)
            }else {
                // _this.time='活动已结束';
                clearInterval(interVal);
            }
        }, 1000);
    },
    timeSever(total) {
        var hour = parseInt(total / 60 / 60 % 24) < 10 ? '0' + parseInt(total / 60 / 60 % 24) : parseInt(total / 60 / 60 % 24);
        var minute = parseInt(total / 60 % 60) < 10 ? '0' + parseInt(total / 60 % 60) : parseInt(total / 60 % 60);
        var seconds = parseInt(total % 60) < 10 ? '0' + parseInt(total % 60) : parseInt(total % 60);
        this.time='活动正在进行(倒计时' + hour + ':' + minute + ':' + seconds + ')'
    },
    checkActive(message) {
          var _this=this;
           if (message.data.is_action == 1 && message.data.data.is_pay == 1 && message.data.data.pay_type == 'free') {
               //前20名免费获取
               _this.selected.select=true;
               if (message.data.data.time_init == 0) {
                   _this.time="";
                   _this.show_title='活动已结束，您好友「' +_this.userName + '」已获得<span class="front-red">20</span>次支持，他免费领取了他定制的T恤哦'
               } else {
                   _this.timeTotal(message);
                   _this.show_title='您好友「' + _this.userName + '」已获得<span class="front-red">20</span>次支持，他已免费领取定制T恤，快来参与吧'
               }
           }
           if (message.data.data.is_pay == 0 && message.data.data.pay_type == 'wxpay_6') {
               //20名以外，6折购买
               _this.selected.select=true;
               if (message.data.data.time_init == 0) {
                    _this.time="";
                   _this.show_title='活动已结束，您好友「' + _this.userName + '」已获得<span class="front-red">20</span>次支持，他没能免费领取T恤，但是他可以6折购买哦'
               } else {
                   _this.timeTotal(message);
                   _this.show_title='您好友「' + _this.userName + '」已获得<span class="front-red">20</span>次支持，但未能免费领取T恤，但是他可以6折购买，快来参与吧'
               }
           }
           if (message.data.data.is_action == 1 && message.data.data.is_pay == 0 && message.data.data.pay_type == 'free') {
               //活动进行中
               if (message.data.data.time_init == 0) {
                _this.selected.select=true;
                    _this.time="";
                   _this.show_title='活动已结束，您好友「' + _this.userName + '」没能获得支持，他没有免费获得此T恤，前往定制专属你的T恤吧'
               } else {
                console.log('aaa')
                   _this.timeTotal(message);
                   _this.show_title='您好友「' + _this.userName + '」已获得<span class="front-red">' + _this.total + '</span>次支持，他再获得' + _this.que + '次支持可有机会免费获得此衣服，快来参与吧'
               }
           }
           if (message.data.data.is_action == 0 && message.data.data.is_pay == 0 && message.data.data.pay_type == 'wxpay') {
               //活动结束没能集满赞
               _this.selected.select=true;
               _this.time="";
               _this.show_title='活动已结束，您好友「' + _this.userName + '」没能获得支持，他没有免费获得此T恤，前往定制专属你的T恤吧'
           }
           if (message.data.data.is_pay == 1 && message.data.data.pay_type == 'wxpay') {
               //正常下单
               _this.selected.select=true;
               _this.time="";
               _this.show_title='您好友「' + _this.userName + '」定制他的个性T恤，前往定制专属您的T恤吧'
           }

       }
  },
  computed:{
    sex(){
      return this.$store.state.sexImg;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
#app{width: 100%;height: 100%;}
.all{width: 100%;height: 100%;background-image: url('./../assets/img/finishBackground.png');background-size: 100%;background-repeat: no-repeat;font-family: PingFangSC-Semibold;color: #FFFFFF;letter-spacing: -0.24px;position: fixed; overflow-y: scroll;}
.center{width: 100%;margin-top:7%;}
.timer{width: 100%;height: 30px;line-height: 30px;font-size: 27px;text-align: center;display: block;margin-bottom: 11px;font-family: PingFangSC-Semibold;color: #FFFFFF;letter-spacing: -0.24px;}
.show_img{width: 80%;margin-left: 10%;}
.fen_img{width: 100%;border:4px solid ;border-image:-webkit-linear-gradient( #7403FF, #E716C4) 10 10;}
.show_title{width: 77.7%;margin-left: 10%;font-size: 21px;margin-top: 7%;line-height: 40px}
.show_title span{color: #EF2929;}
.show_title span.show_name{color:#FFFFFF;}
.show_click{width: 77.7%;margin-top:7%;margin-left:10%;}
.front-red{color: red}
.show_click div{float: left;height:88px;line-height: 88px;font-size: 40px;border-radius: 44px;}
.goodgood{width: 36%;position: relative;}
.select{opacity: 0.4}
.click_good{width:100%;;background-image: linear-gradient(90deg, #FF8E03 0%, #7503FF 100%);text-align: center;position: absolute;left: 0;top: 0}
.goodShow{width: 100%;position: absolute;left: 0;top: -100px;opacity: 0}
.click_continue{width: 59%;background-image: linear-gradient(90deg, #7403FF 0%, #E716C4 100%);margin-left: 4%}
.continue_design{display: block;float: left;width: 67.2%;height: 56px;margin-left: 13.7%;margin-top:16px;line-height: 56px;font-size: 40px}
.continue_img{width: 40px;height:40px;display: block;float: left;margin-top: 24px;margin-left: 3%;}

.fade-enter-active, .fade-leave-active {
  transition: all 2s;
}
.fade-enter-to,.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  top: -300px
}
.fade-enter,.fade-leave /* .fade-leave-active below version 2.1.8 */ {
  opacity: 1;
  top: -100px
}
</style>
